<template>
  <div class="header">
    <!-- 添加返回首页按钮 -->
    <div class="back-home"  @click="handleRoute('/enter')">
      <i class="el-icon-s-home"></i>
      返回首页
    </div>
    
    <div class="left-block">
      <div class="header-menu left">
        <div @click="handleRoute('/overall')" :class="path==='/overall'?'active':''" class="menu-item">总体情况</div>
      </div>
     <div class="header-menu left" >
       <div @click="handleRoute('/agriculture')" :class="path==='/agriculture'?'active':''" class="menu-item">农业相关数据</div>
     </div>
     <div class="header-menu left" >
       <div @click="handleRoute('/industry')" :class="path==='/industry'?'active':''" class="menu-item">工业相关数据</div>
     </div>
   </div>
    <div class="header-title" @click="handleRoute('/enter')">
      <span class="title">肃州区数据资源池综合分析系统</span>
    </div>
   <div class="right-block">
     <div class="header-menu right" >
       <div @click="handleRoute('/service')" :class="path==='/service'?'active':''" class="menu-item">服务业相关数据</div>
     </div>
     <div class="header-menu right" >
       <div @click="handleRoute('/society')" :class="path==='/society'?'active':''" class="menu-item">社会事业相关数据</div>
     </div>
     <div class="header-menu right" >
       <div @click="handleRoute('/other')" :class="path==='/other'?'active':''" class="menu-item">其他</div>
     </div>
   </div>
  </div>
</template>
<script>
import {getCurrentTime, getWeek} from "@/utils/utils";

export default {
  name:'Header',
  data(){
    return{
      path:'',
      timer:null,
      time:{
        date:'--',
        week:'--',
        time:'--',
      }
    }
  },
  watch:{
    "$route":{
      immediate:true,
      handler(e){
        this.path=e.path;
      }
    }
  },
  mounted() {
    this.setTime();
    this.timer&&clearInterval(this.timer);
    this.timer=setInterval(()=>{
      this.setTime()
    },1000)
  },
  beforeDestroy() {
    this.timer&&clearInterval(this.timer);
  },
  methods:{
    handleRoute(url){
      if(url){
        this.$router.push(url);
      }
    },
    setTime(){
      let str=getCurrentTime().replaceAll('-','.');
      this.time.date=str.slice(0,10);
      this.time.time=str.slice(11,str.length)
      this.time.week=getWeek();
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  z-index: 9;
  width: 100%;;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  padding: 0 30px;
  align-items: center;
  justify-content: space-between;
  $infoWidth: 330px;
  background: url("~@/assets/images/theme-blue/header/header-bg.png") no-repeat center;
  background-size: auto 80%;
.left-block{
  width: calc((100% - 640px) / 2);
  display: flex;
  justify-content: space-between;
  .header-menu.left {
    .menu-item {
      background: url("~@/assets/images/theme-blue/header/header-left.png") no-repeat center;
      background-position-x: center;
      background-position-y: bottom;
      background-size: 100% 75%;
    }

    .menu-item.active {
      background: url("~@/assets/images/theme-blue/header/header-left-active.png") no-repeat center;
      background-position-x: center;
      background-position-y: bottom;
      background-size: 100% 80%;
    }
  }
}
  .header-menu {
    width: calc(100% / 3);
    display: flex;

    .menu-item {
      margin-top: 20px;
      cursor: pointer;
      width: 340px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
  }
  .right-block{
    width: calc((100% - 600px) / 2);
    display: flex;
    justify-content: space-between;
    .header-menu.right {
      .menu-item {
        background: url("~@/assets/images/theme-blue/header/header-right.png") no-repeat center;
        background-position-x: center;
        background-position-y: bottom;
        background-size: 100% 80%;
      }

      .menu-item.active {
        background: url("~@/assets/images/theme-blue/header/header-right-active.png") no-repeat center;
        background-position-x: center;
        background-position-y: bottom;
        background-size: 100% 80%;
      }
    }
  }



  .header-title {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 600px;
    cursor: pointer;
    .title{
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      font-family: 'lengku';
    }
  }

  .time {
    margin-top: 20px;
    width: $infoWidth;
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    color: #fff;
    .week {
      margin: 0 15px;
    }
    .time-text{
      text-shadow: 0 0 13px #1B7EF2E8;
    }
  }
}
  // 添加返回首页按钮样式
  .back-home {
    position: absolute;
    top: 8px;
    left: 35px;
    padding: 2px 12px;  // 减小内边距
    background: linear-gradient(90deg, rgba(3,85,255,0.3) 0%, rgba(3,85,255,0.6) 100%);
    border: 1px solid #29F1FA;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;    // 减小字体大小
    display: flex;
    align-items: center;
    gap: 5px;           // 减小图标和文字的间距
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(41,241,250,0.3);
    z-index: 999;

    i {
      font-size: 16px;  // 减小图标大小
    }
  
}
</style>
